BEM Resources

Everyone loves a bit of BEM in their development. Here’s just the starts of hopefully a large list of resources.

Articles

• A CSS Guideline Tutorial: BEM with Sass
• BEMantic - DRY like you mean it
• BEM & Atomic Design: A CSS Architecture Worth Loving
• Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them
• BEM and SMACSS: Advice From Developers Who’ve Been There
• MindBEMding – getting your head ’round BEM syntax - CSS Wizardry
• A New Front-End Methodology: BEM - Smashing Magazine
• BEM 101 - CSS Tricks
• An Introduction to the BEM Methodology - Tuts Plus
• Scaling Down The BEM Methodology For Small Projects - Smashing Magazine
• Fifty Shades of BEM - Kaelig
• Keeping the Front-End Modular with BEM - Thoughtbot
• CSS class naming and BEM: Contemporary practice - Phil Baker
• The Evolution Of The BEM Methodology - Smashing Magazine
• BEM Basics - 8th Light
• How To BEM - Roman Kuba
• Expressive BEM with Sass: a different approach - Anders Hansen
• Expressive BEM with Sass Part II: A first draft of mixins - Anders Hansen
• Learning to love BEM
• Working with BEM at Scale — Advice From Top Developers
• CSS Architecture: BEMCSS — Block, Element & Modifier
• BEM Guidelines for component focused development
• BEMIT: Taking the BEM Naming Convention a Step Further
• CSS BEM Syntax Basics
• BEM official naming convention
• BEM for CSS - An Introduction
• Getting Started With BEM (with a little help from Sass)
• BEM (Block element modifier) - CSS Methodologies Part 3
• How I stopped worrying and learned to love the CSS with BEM
• BEM CSS Basics for WordPress Themes Developers
• Generate responsive BEMIT classes with Sass
• The BEMIT naming convention
• An Introduction to the BEM Methodology for effective Front-End Development
• CSS Organisation with BEM
• Patterns For Scaling CSS
• BEM by example
• Introducing BEM: The popular CSS naming convention
• 7 Reasons To Use BEM CSS

Resources

• BEM Official Website
• Get BEM
• BEM Cheat Sheet

With Pre-processors

• Generating BEM selectors with CSS preprocessors - Frontend Babel

Sass

• Even Easier BEM-ing with Sass 3.3 - alwaystwisted
• BEM Mixins - CSS Tricks

Stylus

• Stylus and BEM: a quick mixin - Frank M Taylor

PostCSS

• PostCSS BEM Linter

Repos, CodePens and Things

Repos

• BEM Constructor
• WordPress BEM Menu
• BEM Grid
• Flexible Grid System with BEM
• BEM.js

Slides & Videos

Slides

• BEM CSS Workshop - Varya Stepanova
• BEM - Luciano Battagliero

Videos

• Writing Modular CSS With Sass and BEM - Tuts Plus
• MindBEMding – Rethink Web Development - Kevin Mack

Other Awesome Lists

• [A curated list of awesome lists - @sindresorhus](https://github.com/sindresorhus/awesome)